<template>
  <div class="Brief__container">
    <div class="Brief__container__PlaybackArea">
      <div class="Brief__container__PlaybackArea__ImgBox">
        <!-- https://p1.music.126.net/_kULM0XcAcrxWaYaFMQvGQ==/109951168503016448.jpg -->
        <img
          :src="bgcImg"
          alt=""
          ref="ImgBox"
          :style="`transform:rotate(${TransformRotale}deg)`"
        />
      </div>
      <div class="Brief__container__PlaybackArea__content">
        <div class="Brief__container__PlaybackArea__content-name">
          {{ oneMusicPlayData[0] == undefined ? "" : oneMusicPlayData[0].name }}
        </div>
        <div class="Brief__container__PlaybackArea__content-aliasName">
          {{
            oneMusicPlayData[0] == undefined
              ? ""
              : oneMusicPlayData[0].ar[0].name
          }}
        </div>
        <div class="Brief__container__PlaybackArea__progressBar">
          <span
            v-for="(item, index) in 24"
            :key="index"
            :class="
              currentTime > (tagetTime / 24) * index
                ? 'Brief__container__PlaybackArea__progressBar--active'
                : ''
            "
            @click="BriefProgressBar(index)"
          ></span>
        </div>
        <div class="Brief__container__PlaybackArea__time">
          <span class="Brief__container__PlaybackArea__time--active">{{
            currentTime | playTime
          }}</span
          ><span>{{ tagetTime | playTime }}</span>
        </div>
        <div class="Brief__container__PlaybackArea__Control">
          <span @click="ClickLikeMusic">
            <img src="../../assets/image/icon/shoucang_1.png" alt="" />
          </span>
          <span @click="autoPlayPrevious">
            <img src="../../assets/image/icon/48shangyishou.png" alt="" />
          </span>
          <span @click="clickPlay">
            <img
              :src="
                this.$store.state.musicState.isClickPlay
                  ? require('../../assets/image/icon/24gf-pauseCircle.png')
                  : require('../../assets/image/icon/24gf-playCircle.png')
              "
              alt=""
            />
          </span>
          <span @click="autoPlayNext">
            <img src="../../assets/image/icon/49xiayishou.png" alt="" />
          </span>
          <span
            class="Brief__container__PlaybackArea__Control-list"
            @click="isShowMusicPList"
          >
            <img src="../../assets/image/icon/liebiao.png" alt="" />
            <MusicPlayList
              class="Brief__container__PlaybackArea__Control-list-position"
              v-if="isMusicPlayList"
            />
          </span>
        </div>
      </div>
    </div>

    <!-- 歌词显示的位置 一条歌词   -->
    <!-- 底部播放的歌词在上面 首页的在下面 -->

    <div class="Brief__container__DetailsArea">
      <p>
        <span>{{ BriefNewText }}</span>
      </p>
    </div>
  </div>
</template>

<script>
import MusicPlayList from "./MusicPlayList.vue";
import { getUserLike } from "../../Api/personInfoApi";
import { Message } from "element-ui";
export default {
  name: "briefBrief",
  components: {
    MusicPlayList,
  },
  data() {
    return {
      // 显示播放列表页面
      isMuPlList: false,
      BriefText: "",
      BriefNewText: "",
      TransformRotale: 0,
      TransformRotaleTimer: null,
      TransformRotaleIndex: 0,
    };
  },

  computed: {
    isMusicPlayList() {
      return this.$store.state.musicState.isMusicPlayList;
    },
    // 获取audio标签
    getAudioElement() {
      return this.$store.state.musicState.audioElement;
    },
    // 获取audio路径
    audioSrc() {
      return this.$store.state.musicState.audioSrc;
    },
    // 歌曲ID
    musicID() {
      return this.$store.state.musicState.musicID;
    },
    // 判断是否音频暂停
    // Paused() {
    //   return this.$store.state.PlayState.Paused;
    // },
    // 圖片
    bgcImg() {
      return this.$store.state.musicState.bgcImg;
    },
    // 当前播放时间
    currentTime() {
      return this.$store.state.musicState.currentTime;
    },
    // 总播放时间
    tagetTime() {
      return this.$store.state.musicState.tagetTime;
    },
    //   单首歌曲列表详情
    oneMusicPlayData() {
      return this.$store.state.musicState.oneMusicPlayData;
    },
    //歌词数据
    lyricData() {
      return this.$store.state.musicState.lyricData;
    },
    // 图片旋转的角度
    AnimationPlayRotale() {
      return this.$store.state.PlayState.animationPlayRotale;
    },
    // 判断歌曲是否结束
    Is_Audio_Ended() {
      return this.$store.state.PlayState.Is_Audio_Ended;
    },
  },
  created() {
    this.TransformRotale = this.AnimationPlayRotale;
  },
  mounted() {
    if (this.$store.state.musicState.isClickPlay) {
      this.getTransformRotale(this.AnimationPlayRotale);
    }
  },
  beforeDestroy() {
    this.$store.commit("PlayState/SET_ANIMATION_ROTALE", this.TransformRotale);
  },
  methods: {
    // 显示播放列表页面
    isShowMusicPList() {
      this.isMuPlList = !this.isMusicPlayList;
      this.$store.commit("musicState/isMusicPlayList", this.isMuPlList);
    },

    MouseleaveMusicPlayList() {
      this.isMuPlList = false;
      this.$store.commit("musicState/isMusicPlayList", this.isMuPlList);
    },
    // 圆圈的旋转
    getTransformRotale(val) {
      this.TransformRotaleTimer = null;
      this.TransformRotaleIndex = val;
      clearInterval(this.TransformRotaleTimer);
      this.TransformRotaleTimer = setInterval(() => {
        this.TransformRotaleIndex++;
        this.TransformRotale = this.TransformRotaleIndex;
        if (this.TransformRotaleIndex >= 360) {
          this.TransformRotaleIndex = 0;
          clearInterval(this.TransformRotaleTimer);
          this.getTransformRotale(0);
        }
      }, 27.78);
    },

    // 点击播放或暂停
    clickPlay() {
      if (!this.getAudioElement) {
        return;
      }

      this.$nextTick(() => {
        if (this.getAudioElement.readyState == 4) {
          this.$store.state.musicState.isClickPlay =
            !this.$store.state.musicState.isClickPlay;
          if (this.$store.state.musicState.isClickPlay) {
            this.$store.commit("musicState/isClickPlay", true);
            this.$store.commit("musicState/SetMusicPlayListData", this.musicID);
            this.$store.commit("PlayState/SET_Is_Audio_Ended", false);
            // setTimeout(() => {
            this.getAudioElement.play();
            this.getTransformRotale(this.TransformRotale);
            // }, 300);
          } else {
            this.$store.commit("musicState/isClickPlay", false);
            this.getAudioElement.pause();
            clearInterval(this.TransformRotaleTimer);
            this.$store.commit(
              "PlayState/SET_ANIMATION_ROTALE",
              this.TransformRotale
            );
          }
        } else {
          this.$store.commit("musicState/isClickPlay", false);
          this.getAudioElement.pause();
        }
      });

      // console.log(this.$store.state.musicState.isClickPlay)
      // this.$nextTick(() => {
      // this.$store.state.musicState.isClickPlay = !this.$store.state.musicState.isClickPlay;
      // if (this.$store.state.musicState.isClickPlay) {
      //   console.log("播放状态",this.getAudioElement.readyState);
      //   if (this.getAudioElement.readyState == 4) {
      //     setTimeout(() => {
      //       this.getAudioElement.play();
      //       this.$store.commit("musicState/musicPlayListData", this.musicID);
      //       this.$store.commit(
      //         "musicState/isClickPlay",
      //         this.$store.state.musicState.isClickPlay
      //       );
      //     }, 300);
      //   } else {
      //     this.getAudioElement.pause();
      //     this.$store.commit(
      //       "musicState/isClickPlay",
      //       this.$store.state.musicState.isClickPlay
      //     );
      //     // setTimeout(() => {
      //     //   this.getAudioElement.play();
      //     // }, 1000);
      //   }
      // } else {
      //   this.getAudioElement.pause();
      // }
      // });
    },
    // 播放上一首
    autoPlayPrevious() {
      this.$store.dispatch("musicState/Get_Prev_Player", this.musicID);
    },
    // 自动播放下一首
    autoPlayNext() {
      this.$store.dispatch("musicState/Get_Next_Player", this.musicID);
    },
    // 点击跳到对应的播放时长（位置）
    BriefProgressBar(val) {
      clearInterval(this.TransformRotaleTimer);
      //  获取每一份的时间的长度，总时间分为24份
      this.getAudioElement.currentTime = (this.tagetTime / 24) * val;
      this.$store.commit("musicState/isClickPlay", true);
      this.getAudioElement.play();
      this.getTransformRotale(this.TransformRotale);
    },

    // 获取点击的歌曲详情
    getOneMusicDetail() {
      // console.log("监听成功");
      getMusicDetailInfo(this.musicID)
        .then((res) => {
          // console.log("歌曲详情",res)
          this.musicDownLoadName = res.songs[0].name;
          this.$store.commit("musicState/OneMusicPlayData", res.songs);
        })
        .catch((err) => {
          // console.log(err);
        });
    },

    // 默认获取的歌曲
    getDefaultMusic(id) {
      getMusicDetailInfo(id)
        .then((res) => {
          // console.log(res);
          this.$store.commit("musicState/OneMusicPlayData", res.songs);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击添加音乐为喜欢 默认true 、否则false（api有问题）
    ClickLikeMusic() {
      this.$store
        .dispatch("PlayState/Set_UserLike", { uid: this.musicID, like: true })
        .then((res) => {
          if (res.code === 200) {
            Message.success("已添加到喜欢列表");
          } else {
            Message.error("添加喜欢列表失败");
          }
        })
        .catch((err) => {
          Message.error("添加喜欢列表失败");
        });
    },
   
  },
  watch: {
    lyricData: function (newVal) {
      this.BriefNewText = newVal[0].lyr;
    },
    AnimationPlayRotale: function (newVal) {
      // console.log("AnimationPlayRotale", newVal);
      this.TransformRotale = newVal;
    },
    currentTime(time) {
      // 歌词的显示
      if (this.lyricData.length === 0) {
        return;
      }
      this.lyricData.map((item, index) => {
        if (index < this.lyricData.length - 1) {
          if (item.time <= time && this.lyricData[index + 1].time >= time) {
            if (item.lyr !== "") {
              this.BriefNewText = item.lyr;
            }
          }
        }
      });
    },

    // 监听是否播放-用于从其他页面点击歌曲进行播放-切换歌曲
    audioSrc(newVal, oldVal) {
      if (newVal !== oldVal && oldVal !== "") {
        let timer = null;
        clearInterval(this.TransformRotaleTimer);
        this.$store.commit("musicState/isClickPlay", false);
        this.TransformRotale = 0;
        this.$store.commit("PlayState/SET_ANIMATION_ROTALE", 0);
        timer = setTimeout(() => {
          this.getTransformRotale(0);
          this.$store.commit("musicState/isClickPlay", true);
          this.getAudioElement.play();
          clearTimeout(timer);
        }, 500);
        
      }
      
    },
    // 判断歌曲是否播放完成并结束
    Is_Audio_Ended(newVal) {
      if (newVal) {
        clearInterval(this.TransformRotaleTimer);
        this.$store.commit("PlayState/SET_ANIMATION_ROTALE", 0);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.Brief__container {
  position: absolute;
  top: calc(50% - 300px);
  left: calc(50% - 450px);
  width: 1000px;
  min-height: 450px;

  border: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 60px;
  box-sizing: border-box;
  /* 模糊大小就是靠的blur这个函数中的数值大小 */
  backdrop-filter: blur(30px);

  &__PlaybackArea {
    position: relative;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    // 旋转图片
    &__ImgBox {
      position: absolute;
      left: 40px;
      top: calc(50% - 168px);
      height: 320px;
      width: 320px;
      border-radius: 50%;
      border: 10px solid rgba(171, 192, 210, 0.5);
      background-color: bisque;
      z-index: 10;

      img {
        transform-origin: center center;
        border-radius: 50%;
      }
    }

    // 歌名
    &__content {
      height: 100%;
      margin-left: 400px;
      padding: 20px 26px 20px 0;
      box-sizing: border-box;
      // border-left: 1px solid red;
      &-name,
      &-aliasName {
        height: 38px;
        text-align: left;
        font-size: 28px;
        margin-bottom: 10px;
        color: rgba(255, 255, 255, 0.3);
      }
      &-name {
        height: 48px;
        font-size: 36px;
        color: #fff;
        font-weight: bold;
      }
    }
    // 进度条
    &__progressBar {
      margin: 40px 0;
      padding: 20px 0;
      display: flex;
      span {
        display: block;
        margin-right: 10px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        cursor: pointer;
        background-color: #cdced3;
        box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.7);
      }
      // 进度条激活状态
      &--active {
        background-color: #83fefe !important;
        box-shadow: 0px 0px 8px rgba(131, 254, 254, 1) !important;
      }
    }

    // 时间
    &__time {
      color: #fff;
      padding: 20px 0;
      span {
        cursor: pointer;
        text-shadow: 0px 0px 14px rgba(255, 255, 255, 1);
        &:first-child {
          float: left;
        }
        &:last-child {
          float: right;
        }
      }
      &--active {
        color: rgba(131, 254, 254, 0.9) !important;
        text-shadow: 0px 0px 14px rgba(131, 254, 254, 1) !important;
      }
    }

    // 控制栏
    &__Control {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      // background: #000;
      align-items: center;
      padding: 34px 58px;
      span {
        display: inline-block;
        height: 32px;
        width: 32px;
        margin: 0 24px;
        cursor: pointer;
        &:nth-child(3) {
          width: 46px !important;
          height: 46px !important;
        }
      }

      &-list {
        position: relative;
        &-position {
          height: 320px;
          position: absolute;
          top: 50px;
          right: 0px;
        }
      }
    }
  }

  &__DetailsArea {
    position: absolute;
    top: 480px;
    left: 0;
    width: 100%;
    p {
      overflow: hidden;
      color: #d6d6d4;
      height: auto;
      text-align: center;
      margin: 0;
      padding: 0;
      font-size: 24px;
      font-weight: bold;
      span {
        color: #fff;
      }
    }
  }
}
</style>
